<template>
    <div v-show="canShow">
      <div class="RechargeSuccessful" v-if="RechargeSuccessful">
        <div class="RechargeSuccessful_bg">
          <div class="RechargeSuccessful_content">
            <div class="RechargeSuccessful_close" ><i class="el-icon-close" @click="closeWindow"></i></div>
            <div class="RechargeSuccessful_content_icon"><i class="el-icon-check"></i></div>
            <div class="RechargeSuccessful_content_title">恭喜您！充值成功</div>
          </div>
        </div>
      </div>
        <!-- 会员弹窗 -->
        <div class="MemberPopup" v-show="!RechargeSuccessful">
            <div class="MemberPopup_bg">
                <div class="MemberPopup_top">
                <div class="MemberPopup_top_img"><img src="@a/img/bg31.jpg"/></div>
                <div class="MemberPopup_top_po">
                    <div class="MemberPopup_top_left">
                    <div class="top_left_img"><img :src="this.baseURL + this.$store.getters.memberInfo['avatar']"/></div>
                    <div class="top_left_txt">
                        <div class="left_txt_dd">{{ $store.getters.memberInfo['name'] }}</div>
<!--                        <div class="left_txt_dt">暂无会员，请立即购买</div>-->
                    </div>
                    </div>
                    <div class="MemberPopup_top_close" @click="closeWindow"><img src="@a/img/closeon.svg"/></div>
                </div>
                </div>
                <div class="MemberPopup_content">
                <div class="MemberPopup_content_price">
                    <div class="content_price_list" v-for="(item, index) in rechargeList" :key="index"
                    :class="{'on': default_index === index , recommend: item.is_recommend}" @click="handleChildClick(index)">
                    <div class="price_list_dd">{{ item.name }}</div>
                    <div class="price_list_dt"><b>{{ item.money }}元</b><span>{{ item.original_price }}元</span></div>
                    <div class="price_list_p">{{ item.describe }}</div>
                    </div>
                </div>
                <div class="MemberPopup_content_txt">
                    <div class="content_txt_list">
                    <div class="txt_list_icon"><img src="@a/img/sv57.svg"/></div>
                    <div class="txt_list_right">
                        <div class="list_right_dd">更快的响应速度</div>
                        <div class="list_right_dt">优质国外网络、高带宽传输</div>
                    </div>
                    </div>
                    <div class="content_txt_list">
                    <div class="txt_list_icon"><img src="@a/img/sv58.svg"/></div>
                    <div class="txt_list_right">
                        <div class="list_right_dd">优先使用新功能</div>
                        <div class="list_right_dt">紧跟模型版本</div>
                    </div>
                    </div>
                    <div class="content_txt_list">
                    <div class="txt_list_icon"><img src="@a/img/sv59.svg"/></div>
                    <div class="txt_list_right">
                        <div class="list_right_dd">回答问题更智能</div>
                        <div class="list_right_dt">参数调优、优化上下文</div>
                    </div>
                    </div>
                    <div class="content_txt_list">
                    <div class="txt_list_icon"><img src="@a/img/sv60.svg"/></div>
                    <div class="txt_list_right">
                        <div class="list_right_dd">可以多轮对话</div>
                        <div class="list_right_dt">隔离对话内容、明晰主题</div>
                    </div>
                    </div>
                </div>
                <div class="MemberPopup_content_pay">
                    <div class="content_pay_left"><img :src="images"/></div>
                    <div class="content_pay_right">
                    <div class="pay_right_dd"><img src="@a/img/sv23.svg"/><!--<img src="@a/img/sv24.svg"/>-->支付宝扫码支付</div>
<!--                    <div class="pay_right_dt"><span>支付剩余时间：</span>00:09:57</div>-->
                    <div class="pay_right_p"><el-checkbox v-model="checked">开通会员代表您接受<a href="https://www.ai-dog.net/serviceAgreement.html" target="_blank">《订阅会员协议》</a></el-checkbox></div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Loading } from 'element-ui';
    export default {
        name: "memberPopup",
        props: {
            show: Boolean, // 接收父组件传递的showPopup属性
        },
      data() {
        return {
          checked: true,
          canShow: false,
          amoney: '',
          aintegral: '',
          describe: '',
          images:'',
          RechargeSuccessful: false,
          interval: null,
          rechargeList: [],
          default_index: 0,
          can_swiper: false,
          reward_points: 0,
          loadingInstance: null,

        };
      },

      methods: {
        openProtocol() {
          window.open('https://www.ai-dog.net/serviceAgreement.html', '_blank');
        },
        handleChildClick(index) {
          this.images = this.rechargeList[index].images
          this.default_index = index
        },
        closeWindow(){
          let that = this;
          clearInterval(that.interval)
          that.$emit('close')
        },
        getProductList(){
          let that = this;
          that.axios.post('/api/products/getList', {is_integral:1}).then(
              res => {
                if(res.code === 1){
                  that.rechargeList = res.result;
                  that.rechargeList.forEach( (item,index) => {
                    if(item.is_recommend){
                      that.default_index = index
                    }
                  })
                  that.handleChildClick(that.default_index)
                  that.can_swiper = true
                  that.canShow = true

                  that.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                    that.loadingInstance.close();
                  });

                  that.interval = setInterval(function(){
                    that.axios.post('/api/pointOrder/hasNewOrder').then(res=>{
                      if(res.code === 1) {
                        if(res.result){
                          that.$message.success('支付成功')

                          that.RechargeSuccessful = true;
                          // that.closeWindow()
                          clearInterval(that.interval)
                          that.axios.get('/api/member/getInfo').then(res => {
                            localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                            that.$store.commit('setMemberInfo', res.result)
                          })
                        }
                      }
                    })
                  }, 1000)
                }
              }
          )
        }
      },
      created() {
        this.loadingInstance = Loading.service({});
        this.getProductList()


      }
    }
</script>

<style scoped>
    @import "memberPopup.css";
</style>
